<template>
    <div class="detailbox">
         <div class="headrr">
            <h2>详情</h2>
            <!-- <b style="font-size: 18px;">返回</b> -->
            <h2  @click="back" style="cursor: pointer;">返回</h2>
         </div>
            <div class="wrap">
                <el-row class="row_1">
                  <el-col class="col_1" :span="12">
                    <h3>姓&nbsp;&nbsp;&nbsp;&nbsp;名&nbsp;:</h3>
                    <p>{{formData.teaName}}</p>
                  </el-col>
                  <el-col class="col_1" :span="12">
                    <h3>年&nbsp;&nbsp;&nbsp;&nbsp;龄&nbsp;:</h3>
                    <p>{{formData.teaAge}}</p>
                  </el-col>
                </el-row>
                <el-row class="row_1">
                  <el-col class="col_1" :span="12">
                    <h3>编&nbsp;&nbsp;&nbsp;&nbsp;号&nbsp;:</h3>
                    <p>{{formData.teaNum}}</p>
                  </el-col>
                  <el-col class="col_1" :span="12">
                    <h3>性&nbsp;&nbsp;&nbsp;&nbsp;别&nbsp;:</h3>
                    <p>{{formData.teaSex}}</p>
                  </el-col>
                </el-row>
                <el-row class="row_1">
                  <el-col class="col_1" :span="12">
                    <h3>联系方式:</h3>
                    <p>{{formData.teaPhone}}</p>
                  </el-col>
                  <el-col class="col_1" :span="12">
                    <h3>职&nbsp;&nbsp;&nbsp;&nbsp;称&nbsp;:</h3>
                    <p>{{formData.teaTitle}}</p>
                  </el-col>
                </el-row>
                <el-row class="row_1">
                  <el-col class="col_1" :span="12">
                    <h3>教学科目:</h3>
                    <p>{{rolelist}}</p>
                  </el-col>
                </el-row>
            </div>
         </div>
</template>

<script>
export default {
  data(){
    return{
      teaId:0,
      baseUrl:require("../js/baseUrl").baseUrl,
      formData: {
        teaName: "",
        teaAge: "",
        teaSex: "",
        teaPhone: "",
        teaTitle: "",
        teasub: "",
        teaId:"",
        titleName:""
      },
      subname:'',
      rolelist:''
    }
  },
  methods:{
    back(){
      this.$router.push("/teachermanager")
    },
    //获取职称列表
  gettitleList(){
      this.$http.post(this.baseUrl+"SchoolSys/titleList",{
      }).then(res=>{
        res.data.data.forEach(v=>{
          if(v.titleId==this.formData.teaTitle){
              this.formData.teaTitle=v.titleName
          }
        })
      })
    },
    //获取班级列表
    // getClasslist(){
    //   this.$http.post(this.baseUrl+"SchoolSys/CLassList",{
    //   }).then(res=>{
    //       res.data.data.forEach(v => {
    //        if(v.clazzId==this.formData.teaClass){
    //           this.formData.teaClass=v.clazzName
    //        }
    //       });
    //   })
    // },
    //获取已有科目
    showSubnames(){
      this.teaSubs=[]
      for(var i=0;i<this.subname.length;i++){
        if(i>0){
          this.rolelist=this.rolelist+" / "
        }
        this.rolelist=this.rolelist+this.subname[i].subName
      }
    },
    findteacherId() {
      this.$http.post(this.baseUrl + "SchoolSys/getTeacherById", {
        teaId: this.teaId
      }).then(res => {
        if (res.data.code == 200) {
          this.formData=res.data.data
          this.gettitleList()
         this.subname=res.data.data.subs
          this.showSubnames()
        }
      })
    }
  },
  mounted(){
    this.teaId = this.$route.query.teacherinfoid
    this.findteacherId()
  }
}
</script>

<style lang="less"> 
  .detailbox{
    padding: 40px;
    .headrr{
      display: flex;
      justify-content: space-between;
    }
    .headrr b{
      cursor: pointer;
    }
    .teacherdetailForm{
      margin-top: 30px;
    
    }
     .wrap{

    margin-top: 30px;
    }
     .wrap h3{
      width: 90px;
      height: 30px;
      line-height: 10px;
    }
     .wrap p{
      width: 320px;
      margin-left: 10px;
      margin-bottom: 19px;
      line-height: 40px;
      border: 1px solid #999;
      background-color: #ffffff;
      padding-left: 10px;
    }
   .wrap .row_1 .col_1{
    display: flex;
    align-items: center;
    }
    
  }
</style>